<template>
    <div>
        <div class="page-header">
            <p @click="toAlbum">新碟上架</p>
            <i class="iconfont icon-zhuanji"></i>
            <router-link to="/discover/album">更多</router-link>
        </div>
        <div class="swiper-container" id="albumNewestSwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,index) in albums" :key="index">
                    <router-link to="/" class="thumbnail">
                        <img :src="item.picUrl">
                    </router-link>
                    <p>
                        <router-link to="/" class="title">{{item.name}}</router-link>
                    </p>
                    <p>
                        <router-link to="/" class="artist">{{item.artist.name}}</router-link>
                    </p>
                </div>
            </div>


            <!-- 如果需要分页器 -->
            <!--<div class="swiper-pagination"></div>-->

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev" @click.self.prevent.stop="nextPre"></div>
            <div class="swiper-button-next" @click.self.prevent.stop="nextPre"></div>

            <!-- 如果需要滚动条 -->
            <!--<div class="swiper-scrollbar"></div>-->
        </div>

    </div>
</template>

<script>
    import Swiper from 'Swiper';
    import musicApi from '@/request/musicApi';

    let mySwiper = null;
    export default {
        name: "album_newest",
        data() {
            return {
                albums: [],
            }
        },
        methods: {
            toAlbum() {
                this.$router.push({path: '/discover/album'});
            },
            initSwiper() {
                mySwiper = new Swiper('#albumNewestSwiper', {
                    direction: 'horizontal',
                    observer: true,
                    observeParents: true,
                    centeredSlides: false,
                    slidesPerView: 5,
                    spaceBetween: '3%',
                    allowTouchMove: true,
                    autoplay: false,
                    loop: false,
                    on: {
                        resize() {
                            this.update();
                        }
                    },
                    // 如果需要前进后退按钮
                    // navigation: {
                    //     nextEl: '.swiper-button-next',
                    //     prevEl: '.swiper-button-prev',
                    // },
                });

            },
            nextPre() {
                if (mySwiper.realIndex == 0) {
                    mySwiper.slideTo(5, 1000, false);
                    return;
                }
                if (mySwiper.realIndex == 5) {
                    mySwiper.slideTo(0, 1000, false);
                    return;
                }
            },
            addLoadedCounter(i){
                // if(i<=4&&i>=0)
                    this.$store.commit('addLoadedCounter');//判断前五个图片是否加载完毕
            }
        },
        mounted() {
            musicApi.getAlbumNewest({}).then(res => {
                if (res.data.code === 200) {
                    //官网渲染10个数据，api传了12个
                    for (let i = 0; i < 10; i++) {
                        this.albums.push(res.data.albums[i]);
                        // if(i<=4&&i>=0)
                        //     this.$store.commit('addCounter');//前五个
                    }
                    this.$nextTick(() => {
                        this.initSwiper();
                    });
                }
            });
        }
    }
</script>

<style lang="scss">

    #albumNewestSwiper {
        .swiper-slide{
            a.thumbnail{
                margin: 0;
            }
            p{
                margin: 0px;
                a{
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                    padding-left: 10px;
                    color:#000;
                    font-size: 14px;
                    text-decoration: none;
                    &:hover{
                        color: #000;
                    }
                }
                a.artist{
                    color:#666666;
                    font-size: 12px;
                    &:hover{
                        color:#666666;
                    }
                }
            }
        }
    }


</style>